<template>
	<view class="my-praise">
		<pro-list :list='list' @tapItem='goDetail'></pro-list>
		<view v-show="isEmpty">
			<empty></empty>
		</view>
		<view v-show="!isEmpty">
			<load-more :status='loadStatus'></load-more>
		</view>
	</view>
</template>

<script>
	import ProList from '@/components/pro-list/pro-list'
	import storage from '@/commen/utils/storage'
	import LoadMore from '@/components/uni-load-more/uni-load-more'
	import empty from '@/components/empty/empty'
	import {
		myPraise
	} from '@/commen/js/config'

	export default {
		data() {
			return {
				page: 1, // 页数
				list: [], // 商品列表
				loadStatus: 'more', // more loading noMore
				isEmpty: false, // 是否为空
				requestKey: true, // 请求钥匙
			}
		},
		components: {
			ProList,
			LoadMore,
			empty
		},
		onLoad() {
			this.getProductList()
		},
		onPullDownRefresh() {
			this.init()
			this.getProductList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getProductList()
		},
		methods: {
			// 初始化
			init() {
				this.page = 1
				this.requestKey = true
				this.isEmpty = false
				this.list = []
			},
			// 获取商品列表
			async getProductList() {
				this.loadStatus = 'loading'
				const params = {
					token: storage.get('token'),
					page: this.page
				}
				const [err, res] = await myPraise(params)
				if (res) {
					if (res.list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.isEmpty = true
						return
					} else if (res.list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.list = this.list.concat(res.list)
					if (res.list.length < 15 && this.page == 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					this.isEmpty = true
				}
			},
			// 前往详情
			goDetail(index) {
				this.$open('/pages/index/clothes-detail/clothes-detail', {
					productInfo: encodeURIComponent(JSON.stringify(this.list[index])),
					type: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.my-praise {
		@include box-w(100%, $bg-c);
	}
</style>
